@include('Home.head')
<link rel="stylesheet" href="{{ URL::asset('css/home/layui.css') }}">
<script src="__STATIC__/js/Compatible_fonts.js"></script>

<style>
    .goods-left {
        float: left;
        width: 120px;
        height: 120px;
    }

    .goods-left img {
        width: 100%;
        height: 100%;
    }

    .goods-right {
        float: left;
        padding-left: 15px;
    }

    .goods-right .goods-h3 {
        margin-top: 0;
        color: #333;
    }

    .am-panel-bd {
        /* padding-left: 120px; */
    }

    .go-wrapper {
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        margin-bottom: 10px;
    }

    .price-bg {
        margin: 10px 0 10px 0;
    }

    .price {
        color: #ea1010;
        font-size: 14px;
    }

    .old-price {
        color: #999;
        text-decoration: line-through;
        font-size: 12px;
        margin-left: 15px;
    }
</style>

<body>
<div class="container" id="app">
    <header data-am-widget="header" class="am-header am-header-default my-header">
        {{--<div class="am-header-left am-header-nav am-dropdown"  data-am-dropdown>--}}
        {{--<a href="javascript:;" class="am-dropdown-toggle"  data-am-dropdown-toggle>--}}
        {{--<i class="am-header-icon am-icon-th-large"></i>--}}
        {{--</a>--}}
        {{--<div style="display:none">--}}

        {{--</div>--}}

        {{--</div>--}}
        <h1 class="am-header-title">
            <a href="#title-link" class="">限时购</a>
        </h1>
        {{--<div class="am-header-right am-header-nav">--}}
        {{--<a href="#right-link" class="">--}}
        {{--<i class="am-header-icon  am-icon-share-alt"></i>--}}
        {{--</a>--}}
        {{--</div>--}}
    </header>
    <!-- banner -->
    <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{&quot;directionNav&quot;:false}'
         style="box-shadow:none">
        <ul class="am-slides">
            <li>
                <img src="http://qiniu.baoliy168.com/eecabd0e5594ca0831d7f68db21b15c2.jpg">
            </li>
            <li>
                <img src="http://qiniu.baoliy168.com/eecabd0e5594ca0831d7f68db21b15c2.jpg">
            </li>
        </ul>
    </div>

    <div data-am-widget="tabs" class="am-tabs am-tabs-default" id="sort-nav">
        <ul class="am-tabs-nav am-cf" id="type-ul">
            <li class="" v-for="val in classifyDate">
                <a href="javascript:;" v-on:click="changeType(val.id)" :id="'type-a-check' + val.id">@{{ val.name }}</a>
            </li>
        </ul>
        <div class="am-tabs-bd">
            <div class="am-cf am-g">
                <ul class="am-avg-sm-1 my-shop-product-list">
                    <li v-for="(val,index) in goods" :key="index" class="go-wrapper">
                        <a v-on:click="pay(val.id,val.is_open)">
                            <div class="am-panel-bd">
                                <div class="goods-left">
                                    <img class="am-img-responsive" :src="val.img"/>
                                </div>
                                <div class="goods-right">
                                    <h3 class="goods-h3">@{{ val.goodsname }}</h3>
                                    {{--                                    <p class="red2" style="font-size: 13px">距离结束还剩:@{{ timekeep[index] }}</p>--}}
                                    <p style="font-size: 14px" v-if="val.is_open!=1">开始时间: <span style="color: red">@{{ val.startTime }}</span></p>
                                    <p class="price-bg" v-if="priceArr[index]"><span class="price">限时价¥@{{ priceArr[index] }}</span><span
                                                class="old-price">¥@{{ val.originalprice }}</span></p>
                                    <p class="price-bg" v-if="!priceArr[index]"><span class="price">¥@{{ val.originalprice }}</span>
                                    </p>
                                    <button class="am-btn am-btn-danger am-btn-xs index-addcart-btn"
                                            v-on:click="pay(val.id,val.is_open)">立即抢购
                                    </button>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
                <li class="layui-flow-more" v-if="loading">加载中</li>
                <li class="layui-flow-more" v-if="loading==false">没有更多了</li>
            </div>
        </div>
    </div>

    @include('Home.foot')
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            goods: [],
            classifyDate: {},
            classifyFirst: '',
            page: '', //总页数
            nowPage: '', //本页
            loading: false, //异步加载时的限制
            bottomHight: 50, //滚动条到某个位置才触发时间
            priceArr: [], //当天价格
            timeArr: [],  //开始时间
            priceDay: []
            // timekeep: [],  //倒计时
            // flagTime: []  //判断是否过期
        },
        //事件
        compute: {
            // timeArr: func
        },
        watch: {
            goods: function (val) {
                // var priceDay = []
                var timeNow = new Date().getTime()
                val.forEach((item) => {
                    var startTime = item.startTime.replace(/-/g, '/')
                    var leftTime = timeNow - new Date(startTime)
                    var nowDay = Math.floor((leftTime) / 1000 / 60 / 60 / 24)  //天
                    var timePrice = item.timeprice
                    var jsonPrice = JSON.parse(timePrice)
                    this.priceArr.push(jsonPrice[nowDay])
                    //console.log(jsonPrice)
                    this.timeArr.push(startTime)
                    this.priceDay.push(jsonPrice.length)
                });
            }
        },
        methods: {
            handleScroll: function () {
                if (getScrollBottomHeight() <= app.bottomHight && app.nowPage < app.page && app.loading == false) {
                    app.loading = true;
                    $.post("/home/microShop/smallshop", {
                        '_token': '{{csrf_token()}}',
                        class: 'select',
                        page: app.nowPage + 1
                    }, function (res) {

                        for (var i = 0; i < res.data.data.length; i++) {
                            app.goods.push(res.data.data[i]);
                        }
                        app.nowPage++;
                        app.loading = false;
                    });
                }
            },
            initialize: function () {
                $.post("/home/timeShop/goods", {
                    '_token': '{{csrf_token()}}',
                    class: 'select',
                    two_tid: 0
                }, function (res) {
                    //console.log(res)
                    if (res.code) {
                        app.classifyDate = res.classifyDate;
                        app.classifyFirst = res.classifyFirst;
                        var goodData = res.data[res.classifyFirst]
                        setTimeout(function () {
                            $("#type-ul li").eq(0).addClass("am-active");

                        }, 200)
                        app.page = goodData.last_page;
                        app.nowPage = goodData.current_page;
                        app.goods = goodData.data
                    } else {
                        layer.msg(res.data);
                    }
                });
            },
            //支付页面
            pay: function (id,open) {
                /* if ( id == 3 ) {
                     layer.msg("此产品正在升级中,请耐心等待,谢谢!");
                     return false;
                 }*/
                if(parseInt(open)===1) {
                    window.location.href = "/home/timeShop/detil?id=" + id;
                }else {
                    layer.msg('活动暂未开始')
                }

            },
            changeType: function (g) {
                app.priceDay = []
                app.timeArr = []
                app.priceArr = []
                // clearInterval(this.timer)
                $.post("/home/timeShop/goods", {
                    '_token': '{{csrf_token()}}',
                    class: 'select',
                    two_tid: g
                }, function (res) {
                    if (res.code) {

                        app.classifyDate = res.classifyDate;
                        app.classifyFirst = res.classifyFirst;
                        var goodData = res.data[res.classifyFirst]
                        //console.log(goodData)
                        //console.log()
                        $("#type-a-check" + g).parent("li").siblings().removeClass('am-active');
                        $("#type-a-check" + g).parent("li").addClass("am-active");
                        app.page = goodData.last_page;
                        app.nowPage = goodData.current_page;
                        app.goods = goodData.data
                    } else {
                        layer.msg(res.data);
                    }
                });
            }
        },
        //自动执行
        mounted: function () {
            this.initialize();
        },
    });
    //添加滚动事件
    window.onload = function () {
        window.addEventListener('scroll', app.handleScroll)
    }

    //滚动条到底部的距离
    function getScrollBottomHeight() {
        return getPageHeight() - getScrollTop() - getWindowHeight();

    }

    //页面高度
    function getPageHeight() {
        return document.querySelector("html").scrollHeight
    }

    //滚动条顶 高度
    function getScrollTop() {
        var scrollTop = 0,
            bodyScrollTop = 0,
            documentScrollTop = 0;
        if (document.body) {
            bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        return scrollTop;
    }

    function getWindowHeight() {
        var windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
        return windowHeight;
    }
</script>

</html>